<template>
	<view class="content">
		<uni-popup :show="type === 'shouhuo'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定收货吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="type === 'quxiao'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定取消此订单吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="cancelOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			订单详情
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/back.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>

		<view class="order-state">
			<view class="state-txt">
				<view style="font-size: 30upx;color: #fff;">{{ordershowMsg}}</view>
				<view v-if="orderMessage.status==1" style="font-size: 24upx;margin-top: 10upx;" class="flex aic">剩
					<uni-countdown :show-day="false" :day="waitpaytime.day" :hour="waitpaytime.hour" splitorColor="#FFFFFF" :minute="waitpaytime.minite"
					 :second="waitpaytime.seconds" color="#FFFFFF" background-color="transparent" :show-colon="false" />
					自动关闭</view>
				<view v-else-if="orderMessage.status==3" style="font-size: 24upx;margin-top: 10upx;" class="flex aic">还剩
					<uni-countdown :show-day="false" :day="waitpaytime.day" :hour="waitpaytime.hour" splitorColor="#FFFFFF" :minute="waitpaytime.minite"
					 :second="waitpaytime.seconds" color="#FFFFFF" background-color="transparent" :show-colon="false" />
					自动确认</view>
			</view>
			<image class="orderimg-1" src="../../static/p-1.png" v-if="orderMessage.status==1"></image>
			<image class="orderimg-2" src="../../static/p-2.png" v-if="orderMessage.status==2"></image>
			<image class="orderimg-3" src="../../static/p-3.png" v-if="orderMessage.status==3"></image>
			<image class="orderimg-4" src="../../static/p-4.png" v-if="orderMessage.status==4"></image>
			<image class="orderimg-5" src="../../static/p-5.png" v-if="orderMessage.status==5||orderMessage.status==6"></image>
		</view>
		<!-- 订单信息 -->
		<view style="padding-bottom: 120upx;">
			<view class="order-address">
				<image src="../../static/p-6.png" style="width: 26upx;height: 40upx;"></image>
				<view style="font-size: 28upx;color: #333;flex:1;margin-left: 28upx;">
					<view>
						<text>{{orderAddress.name}}</text><text style="font-size: 26upx;color: #666;margin-left: 28upx;">{{orderAddress.tel}}</text>
					</view>
					<view style="margin-top: 16upx;">
						{{orderAddress.province_name}}{{orderAddress.city_name}}{{orderAddress.county_name}}{{orderAddress.address}}
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-content">
				<view class="goodbox" v-for="(item,key) in orderGoods" :key="key">
					<view style="display: flex;font-size: 28upx;">
						<view style="width:170upx;height: 170upx;background-color: #eee;">
							<image :src="item.images" style="width: 100%;height: 100%;"></image>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 18upx;width: 310upx;">
							<view class="goods-info">
								{{item.title}}
							</view>
						</view>
						<view style="text-align: right;display: flex;flex-direction: column;justify-content: space-between;margin-left: 18upx;">
							<view>
								<view>{{orderMessage.payment_id=='6'?item.integral/item.buy_number+'VS':'￥'+item.price}}</view>
								<view style="font-size: 24upx;color: #666;margin-top: ;">x{{item.buy_number}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-totalmsg">
					<view v-if="orderMessage.pay_status!=='0'" style="font-size: 26upx;margin-bottom: 8upx;">支付方式：{{orderMessage.payment_name}}</view>
					<view class="flex jsb">
						<view v-for="(exitem,ekey) in orderMessage.extension_data">
							{{exitem.price==0?'免邮':exitem.name+':'+exitem.price+'元'}}
						</view>
						<view>
							共{{orderMessage.buy_number_count}}件商品 合计: <text style="color:#EC6104;" v-if="orderMessage.payment_id=='6'">{{orderMessage.integral}}VS</text><text
							 v-else style="color:#EC6104;">￥{{orderMessage.total_price}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单编号时间等详情 -->
			<view class="order-btm-box">
				<view class="order-pull-box">
					<view class="order-pull-top">
						订单详情
					</view>
					<view class="order-detail-message">
						<view style="position: relative;">订单编号：{{orderMessage.order_no}}
							<text style="position: absolute;right: 20upx;color: #EC6104;" @click="copy(orderMessage.order_no)">复制</text>
						</view>
						<view>创建时间：{{orderMessage.add_time}}</view>
						<view v-if="orderMessage.status==2||orderMessage.status==3||orderMessage.status==4">支付时间：{{orderMessage.pay_time}}</view>
						<view v-if="orderMessage.status==3||orderMessage.status==4">发货时间：{{orderMessage.delivery_time}}</view>
						<view v-if="orderMessage.status==4">收货时间：{{orderMessage.collect_time}}</view>
						<view v-if="orderMessage.status=='5'">取消时间：{{orderMessage.cancel_time}}</view>
						<view v-if="orderMessage.status==6">关闭时间：{{orderMessage.close_time}}</view>
					</view>
					<!-- kefu -->
					<a class="kefu-box" :href="'tel:' + customer">
						<image src="../../static/p-7.png" style="width: 38upx;height: 38upx;margin-right: 12upx;"></image>
						联系客服
					</a>
				</view>
			</view>
		</view>
		<!-- 底部的按钮 -->
		<view class="btm-operate" style="display: flex;justify-content: flex-end;background-color: #fff;">
			<view style="padding-right: 50upx;" v-if="orderMessage.status==1">
				<button class="default-opbtn" style="color: #666666;border: 2upx solid #666;border-radius: 6upx;" @click="cancelIt(orderMessage.id)">取消订单</button>
				<!-- <button class="default-opbtn" style="color: #EC6104;border:2upx solid #EC6104;border-radius: 6upx;margin-left: 30upx;">去支付</button> -->
			</view>
			<view style="padding-right: 50upx;" v-if="orderMessage.status==2&&orderMessage.is_remind==0">
				<button type="button" class="default-opbtn" style="color: #666666;border: 2upx solid #666;border-radius: 6upx;"
				 @click="remindOrder(orderMessage.id)">提醒发货</button>
			</view>
			<view style="padding-right: 50upx;" v-if="orderMessage.status==3">
				<button type="button" class="default-opbtn" style="color: #666666;border: 2upx solid #666;border-radius: 6upx;"
				 @click="checkDelivery(orderMessage)">查看物流</button>
				<button type="button" class="default-opbtn" style="color: #EC6104;border:2upx solid #EC6104;border-radius: 6upx;margin-left: 30upx;"
				 @click="comfirmit">确认收货</button>
				<!-- confirmOrder(orderMessage.id) -->
			</view>
		</view>
	</view>
</template>

<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				currentnew: 0,
				// 待付款的时间
				waitpaytime: {},
				type: '',
				//自动确认的时间
				autoconfirmTime: '',
				// 订单商品信息
				orderGoods: [],
				orderId: '',
				userToken: '',
				// 客服的电话号码 已经存到本地了 
				customer: '',
				cancelId: null, // 取消的id
				// 订单的详细信息
				orderMessage: {},
				orderAddress: {}, //订单地址信息
				//订单展示信息
				ordershowMsg:''

			}
		},

		onLoad(options) {
			let that = this
			that.orderId = options.orderid
			that.userToken = uni.getStorageSync('token')
			that.customer = that.companyphone
			that.get_cordinfo()
		},
		onBackPress() {
			return true
		},
		components: {
			uniPopup,
			uniCountdown
		},
		computed: {
			...mapState(['companyphone'])
		},
		methods: {
			// 返回上一页
			backpage() {
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.switchTab({
					url: '../tab/my'
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			// 复制
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			// 查看物流
			checkDelivery(item) {
				uni.navigateTo({
					url: '../delivery/deliverydetail?order=' + JSON.stringify(item)
				})
			},
			// 确认收货
			confirmOrder() {
				let that = this
				postAjax('order/Collect', {
					token: that.userToken,
					id: that.orderMessage.id
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '收货成功',
							icon: 'none'
						})
						that.get_cordinfo()
						that.type = ''
					} else {
						uni.showToast({
							title: '收货失败',
							icon: 'none'
						})
					}
					that.type = ''
				})
			},
			cancelIt(id) {
				this.type = 'quxiao'
				this.cancelId = id
			},
			comfirmit() {
				this.type = 'shouhuo'
			},
			// 提醒发货
			remindOrder(id) {
				let that = this
				postAjax('order/remind', {
					token: that.userToken,
					order_id: id
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '提醒成功',
							icon: 'none'
						})
						that.get_cordinfo()
					} else {
						uni.showToast({
							title: '提醒失败',
							icon: 'none'
						})
					}
					that.type = ''
				})
			},
			// 取消订单
			cancelOrder() {
				let that = this
				postAjax('order/Cancel', {
					token: that.userToken,
					id: that.cancelId
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						that.get_cordinfo()
					} else {
						uni.showToast({
							title: '取消失败',
							icon: 'none'
						})
					}
					that.type = ''
				})
			},
			get_cordinfo() {
				let that = this
				that.orderMessage = {}
				postAjax('order/Detail', {
					token: that.userToken,
					is_orderaftersale: 1,
					id: that.orderId,
				}, function(data) {
					console.log(data)
					that.orderMessage = data.data.data
					// 订单展示处理
					if(that.orderMessage.status=='1'){
						that.ordershowMsg = '待买家付款'
					}else if(that.orderMessage.status=='2'){
						that.ordershowMsg = '待卖家发货'
					}else if(that.orderMessage.status=='3'){
						that.ordershowMsg = '待买家收货'
					}else if(that.orderMessage.status=='4'){
						that.ordershowMsg = '订单已完成'
					}else if(that.orderMessage.status=='5'){
						that.ordershowMsg = '订单已取消'
					}else if(that.orderMessage.status=='7'){
						that.ordershowMsg = '开抢订单'
					}else if(that.orderMessage.status=='8'){
						that.ordershowMsg = '转让订单'
					}else{
						that.ordershowMsg = '订单已关闭'
					}
					console.log(that.ordershowMsg)
					that.orderAddress = data.data.data.address_data
					that.orderGoods = data.data.data.items
					// 通过时间展示 关闭时间和确认时间的状态 做倒计时处理 
					if (that.orderMessage.status == 1) {

						let closeTime = that.orderMessage.confirm_time.replace(/-/g, '/')
						let nowtime = new Date().getTime()
						let ordercloseTime = new Date(closeTime).getTime() + 30 * 60 * 60
						that.waitpaytime.day = Math.floor((nowtime - ordercloseTime) / (3600 * 24 * 1000))
						that.waitpaytime.hour = Math.floor((nowtime - ordercloseTime) % (3600 * 24 * 1000) / 3600 / 1000)
						that.waitpaytime.minite = Math.floor((((nowtime - ordercloseTime) % (3600 * 24 * 1000)) % (3600 * 1000)) / 60 /
							1000)
						that.waitpaytime.seconds = Math.floor((((nowtime - ordercloseTime) % (3600 * 24 * 1000)) % (3600 * 1000)) / 60 /
							1000 / 1000)
					} else if (that.orderMessage.status == 3) {
						that.waitpaytime = {}
						let closeTime = that.orderMessage.confirm_time.replace(/-/g, '/')
						let nowtime = new Date().getTime()
						let ordercloseTime = new Date(closeTime).getTime() + 15 * 60 * 60 * 24
						that.waitpaytime.day = Math.floor((nowtime - ordercloseTime) / (3600 * 24 * 1000))
						that.waitpaytime.hour = Math.floor((nowtime - ordercloseTime) % (3600 * 24 * 1000) / 3600 / 1000)
						that.waitpaytime.minite = Math.floor((((nowtime - ordercloseTime) % (3600 * 24 * 1000)) % (3600 * 1000)) / 60 /
							1000)
						that.waitpaytime.seconds = Math.floor((((nowtime - ordercloseTime) % (3600 * 24 * 1000)) % (3600 * 1000)) / 60 /
							1000 / 1000)
					}
				})
			}
		}
	}
</script>

<style>
	.pageHeader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 128upx;
		background-color: #fff;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #000;
		padding-top: 40upx;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx
	}

	.order-state {
		background-image: linear-gradient(45deg, #73A6F3, #1D84E8);
		position: relative;
		padding: 40upx 30upx;
		min-height: 100upx;
		color: #fff;
		display: flex;
		justify-content: flex-end;
		margin-top: 168upx;
	}

	.state-txt {
		position: absolute;
		top: 72upx;
		left: 58upx
	}

	.orderimg-1 {
		width: 198upx;
		height: 154upx;
	}

	.orderimg-2 {
		width: 200upx;
		height: 140upx;
	}

	.orderimg-3 {
		width: 210upx;
		height: 160upx;
	}

	.orderimg-4 {
		width: 208upx;
		height: 160upx;
	}

	.orderimg-5 {
		width: 148upx;
		height: 154upx;
	}

	.order-address {
		padding: 22upx 0 22upx 58upx;
		display: flex;
		align-items: center;
	}

	.goodbox {
		padding: 36upx 56upx 20upx;
		position: relative;
	}

	.goodbox::before {
		content: '';
		display: block;
		height: 2upx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #f9f9f9;
	}

	.goods-content {
		position: relative;
	}

	.goods-content::after {
		content: '';
		display: block;
		height: 2upx;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods-totalmsg {
		padding: 0 56upx 32upx;
		color: #666;
		font-size: 26upx;
	}

	.order-btm-box {
		padding: 30upx 30upx 0;
	}

	.order-pull-box {
		padding-left: 40upx;
		padding-right: 20upx;
	}

	.order-pull-top {
		position: relative;
		font-size: 28upx;
		color: #333;
	}

	.order-pull-top:before {
		content: '';
		display: block;
		height: 28upx;
		width: 4upx;
		position: absolute;
		top: 8upx;
		left: -18upx;
		background-color: #EC6104;
	}

	.order-pull-top::after {
		content: '';
		display: block;
		width: 12upx;
		height: 12upx;
		border-top: 4upx solid #999;
		border-left: 4upx solid #999;
		transform: rotate(-135deg);
		position: absolute;
		top: 10upx;
		right: 30upx;
	}

	.order-detail-message {
		font-size: 26upx;
		color: #666;
		line-height: 2;
		margin-top: 20upx;
	}

	.kefu-box {
		position: relative;
		display: flex;
		justify-content: center;
		color: #666;
		font-size: 28upx;
		padding: 16upx;
		margin-top: 12upx;
		text-decoration: none;
	}

	.kefu-box:before {
		content: '';
		display: block;
		height: 2upx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #f9f9f9;
	}

	.btm-operate {
		position: fixed;
		padding: 20upx 0;
		z-index: 99;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.default-opbtn {
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		padding: 0;
		text-align: center;
		font-size: 30upx;
		background: none;
		display: inline-block;
	}

	.default-opbtn::after {
		border: none;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
